<script lang="ts" setup>
const data = [
  {
    number: '10001',
    type: '客户服务流程',
    pname: '罗可 Fusionwan 流程',
    pdate: '2024-7-8 12:06:45',
    stage: '售前阶段',
    status: '待处理',
    progress: 10,
    starter: '沈盈苹',
    handler: '刘严响',
    area: '华东',
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李想',
      phone: '19912345678',
    },
  },
  {
    number: '10002',
    type: '测试流程',
    stage: '销售阶段',
    pname: '罗可 Fusionwan 测试流程',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    progress: 60,
    starter: '方惠婕',
    handler: '柳舒',
    area: '华东',
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },
  {
    number: '10003',
    type: '关停流程',
    stage: '销售阶段',
    pname: '罗可关停流程',
    pdate: '2024-7-8 12:06:45',
    status: '已处理',
    starter: '杜莹',
    handler: '彭兴',
    area: '华南',
    progress: 60,
    subject: {
      sign: '理想',
      name: '罗可-华东',
      concat: '李响',
      phone: '19912345678',
    },
  },

]
</script>

<template>
  <div bg-white p2>
    <div mb-3 flex-between-center space-x-3>
      <div>
        筛选：
        <el-tag round type="info" size="default">
          全部
        </el-tag>
        <el-tag round size="default">
          我发起
        </el-tag>
        <el-tag round type="warning" size="default">
          待处理
        </el-tag><el-tag round type="success" size="default">
          已处理
        </el-tag>
      </div>
    </div>
    <BaseTable :data="data" style="width: 100%">
      <el-table-column label="流程号" prop="number" width="70" />
      <el-table-column label="流程名称" prop="pname">
        <template #default="{ row, $index }">
          <router-link v-if="row.type === '客户服务流程'" :to="`/process/${$index}?type=${row.type}`" text-primary>
            <div flex>
              <div class="i-bi:fire mr-2px mt1 text-base text-red" />{{ row.pname }}
            </div>
          </router-link>
          <router-link v-else-if="row.type === '测试流程'" :to="`/process/test/${$index}?type=${row.type}`" text-primary>
            {{ row.pname }}
          </router-link>
          <router-link v-else :to="`/process/stop/${$index}?type=${row.type}`" text-primary>
            {{ row.pname }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="流程分类" prop="type" width="70" />
      <el-table-column label="大区分类" prop="area" width="70" />
      <el-table-column label="商标名称" prop="subject.sign" width="80" />
      <el-table-column label="客户主体名称" prop="subject.name" />
      <el-table-column label="发起人" prop="starter" width="60" />
      <el-table-column label="流程阶段">
        <template #default="{ row }">
          {{ row.stage }}
        </template>
      </el-table-column>
      <el-table-column label="处理人" prop="handler" width="60" />
      <el-table-column label="处理状态" prop="status">
        <template #default="{ row }">
          <el-tag v-if="row.status === '我发起'" round size="default">
            我发起
          </el-tag>
          <el-tag v-if="row.status === '待处理'" round type="warning" size="default">
            待处理
          </el-tag>
          <el-tag v-else round type="success" size="default">
            已处理
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="客户业务对接人">
        <el-table-column label="联系人" prop="subject.concat" />
        <el-table-column label="联系方式" prop="subject.phone" />
      </el-table-column>
      <el-table-column label="发起时间" prop="pdate" />
    </BaseTable>
  </div>
</template>
